<template>
  <div class="finance">
  <el-form ref="form" :rules="rules" :model="form">
    <div class="finance-4">
      <img src="kkkk.webp" width="100%" height="100%" />
      <div class="finance-2">
        <div>金融WEB</div>
        <div>值得信赖的投资理财平台</div>
      </div>
      <div class="finance-5">
        <!-- <img src="./assets/2.png"> -->
        <div class="login-1">
          <span>用户登录</span>
        </div>
        <div class="login-2">
          <el-input
            class="input1"
            v-model="form.input"
            placeholder="手机号/用户名"
          ></el-input>
        </div>
        <div class="login-3">
          <el-form-item
              prop="password"
              class="pr"
              :rules="[
                {
                  pattern: /^(\w){6,18}$/,
                  message: '只能输入6-18个字母、数字、下划线!',
                  trigger: 'change',
                },
              ]"
            >
          <el-input
            class="input2"
            placeholder="登录密码"
            v-model="form.password"
            show-password
          ></el-input>
          </el-form-item>
        </div>
        <div class="login-4">
          <el-button class="button1" type="danger" @click="login"
            >立即登录</el-button
          >
        </div>
        <div class="finance-6">
          <a href="">
            <router-link class="link2" to="/ForgetPwd">忘记密码?</router-link>
          </a>
        </div>
        <div class="finance-7">
          <a href="">
            <router-link class="link" to="/register">用户注册</router-link>
          </a>
        </div>
      </div>
      
    </div>
    <Bottom />
    </el-form>
  </div>
</template>

<script>
import Bottom from "./finance/Bottom.vue";
import axios from "axios";
export default {
  data() {
    return {
     form:{
        input: "",
      password: "",
     }
    };
  },
  components: {
    Bottom,
  },
  methods: {
    login() {
      axios({
        url: "api/user/login",
        method: "POST",
        params: {
          user_phone: this.form.input,
          user_pwd: this.form.password,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$router.push({path:'SecuritySetting7'}); 
        } else {
          this.$message({
            type: "warning",
            message: res.data.message,
          });
          return;
        }
      });
    },
    logincli() {
      this.$router.push({ path: "register" });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
}

li {
  list-style: none;
}
.finance {
  width: 100%;
  height: 100%;
  float: left;
  /* background-color: red; */
  background-color: transparent;
}
.finance-1 {
  width: 100%;
  height: 80px;
  float: left;
  background-color: rgb(244, 230, 230);
}
.finance-2 {
  float: left;
  /* background-color: rgb(43, 210, 49); */
  margin-top: 12px;
  margin-left: 20%;
  position: absolute;
  transform: translate(30%, -1300.5%);
  opacity: 1;
}
.finance-2 div:nth-child(1) {
  font-size: 160%;
  color: red;
  font-weight: bold;
  /* background-color: rgb(81, 51, 149); */
}
.finance-2 div:nth-child(2) {
  font-size: 90%;
  color: #7e7b7b;
}
.finance-3 {
  float: left;
  width: 150px;
  height: 100%;
  /* background-color: rgb(56, 18, 207); */
  text-align: center;
  line-height: 70px;
  margin-left: 10px;
  color: #686060;
  font-size: 130%;
}
.finance-4 {
  width: 100%;
  height: 700px;
  float: left;
  background-color: rgb(244, 7, 7);
}
.finance-5 {
  position: absolute;
  border-radius: 5px;
  width: 385px;
  height: 376px;
  background-color: #fff;
  transform: translate(251%, -117.5%);
  opacity: 1;
}
.login-1 span {
  margin-left: 35px;
  font-size: 130%;
}
.login-1 {
  margin-top: 30px;
}
.login-2 {
  margin-top: 30px;
  margin-left: 35px;
  width: 310px;
}
.login-3 {
  margin-top: 30px;
  margin-left: 35px;
  width: 310px;
}
.login-4 {
  margin-top: 30px;
  margin-left: 35px;
  width: 310px;
}
.button1 {
  width: 310px;
  height: 50px;
}
.finance-6 p {
  margin-left: 35px;
  font-size: 100%;
  color: #7e7b7b;
}
.finance-6 {
  margin-top: 30px;
}
.finance-7 .link {
  margin-left: 35px;
  font-size: 100%;
  color: rgb(9, 5, 5);
  float: left;
  cursor: pointer;
}
.finance-7 {
  margin-left: 240px;
  margin-top: -20px;
}
.link2 {
  float: left;
  color: rgb(9, 5, 5);
  margin-left: 30px;
  cursor: pointer;
}
</style>